/**
 * 虚拟DOM元素创建系统
 *
 * 实现类似React.createElement的功能，用于构建虚拟DOM树
 * 处理元素创建、属性设置和子元素组织
 */

/**
 * 虚拟DOM元素的基本结构
 */
export type ReactElement = {
  /** 元素类型：字符串(原生元素)或函数(组件) */
  type?: string | Function;
  /** 元素属性集合 */
  props?: Record<string, any>;
  /** 子元素数组 */
  children?: ReactElement[];
};

/**
 * 可作为子元素的有效类型
 */
export type ElementChildren =
  | ReactElement // 虚拟DOM元素
  | string // 文本内容
  | number // 数字(会转为文本)
  | boolean // 布尔值(false会被忽略)
  | null // 空值(会被忽略)
  | undefined; // 未定义(会被忽略)

/**
 * 创建虚拟DOM元素
 *
 * @param type 元素类型(标签名或组件函数)
 * @param props 元素属性对象
 * @param children 子元素列表
 * @returns 新创建的虚拟DOM元素
 */
export function createElement(
  type: string | Function,
  props: Record<string, any> | null,
  ...children: ElementChildren[]
): ReactElement {
  // Fragment特殊处理
  if (type === undefined || type === "fragment") {
    return {
      type: "fragment",
      props: props || {},
      children: flattenChildren(children, "fragment", props || {}),
    };
  }

  const finalProps = props || {};
  const flattenedChildren = flattenChildren(children, type, finalProps);

  return {
    type,
    props: finalProps,
    children: flattenedChildren,
  };
}

/**
 * 处理并扁平化子元素数组
 *
 * @param children 子元素列表
 * @param parentType 父元素类型
 * @param parentProps 父元素属性
 * @returns 处理后的子元素数组
 */
function flattenChildren(
  children: ElementChildren[],
  parentType: string | Function,
  parentProps: Record<string, any>
): ReactElement[] {
  const result: ReactElement[] = [];
  processChildren(children, result, parentType, parentProps);
  return result;
}

/**
 * 递归处理子元素，将其添加到结果数组中
 *
 * @param items 要处理的子元素项
 * @param result 结果数组，用于收集处理后的元素
 * @param parentType 父元素类型
 * @param parentProps 父元素属性
 */
function processChildren(
  items: ElementChildren[],
  result: ReactElement[],
  parentType: string | Function,
  parentProps: Record<string, any>
) {
  for (const item of items) {
    if (Array.isArray(item)) {
      // 递归处理数组子元素
      processChildren(item, result, parentType, parentProps);
    } else if (item !== null && item !== undefined && item !== false) {
      if (typeof item === "string" || typeof item === "number") {
        // 处理文本内容
        if (parentType === "text" || parentType === "input") {
          // 对于文本或输入元素，文本内容直接设置为属性
          parentProps.textContent = parentProps.textContent
            ? parentProps.textContent + String(item)
            : String(item);
        } else {
          // 为其他父元素创建文本子节点
          result.push(createTextElement(String(item), parentProps));
        }
      } else {
        // 添加ReactElement子元素
        result.push(item as ReactElement);
      }
    }
  }
}

/**
 * 创建文本节点元素
 *
 * @param text 文本内容
 * @param parent 父元素属性
 * @returns 文本虚拟DOM元素
 */
export function createTextElement(
  text: string,
  parent: Record<string, any>
): ReactElement {
  return {
    type: "TEXT_ELEMENT",
    props: { text },
    children: [],
  };
}
